<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="牧中智慧畜牧大数据云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">
    <title>牧中智慧畜牧大数据云平台V1.0</title>


</head>
<body style="background-color:#fff">

<div class="wrapper wrapper-content">
    <div class="main">
        <div class="main-inner">

            <div class="block-flat">
                <div class="header">
                    <h3 style="margin-left: 43%">更新用户信息</h3>
                </div>
                <div class="content">
                    <form class="form-horizontal group-border-dashed" action="#"
                          style="border-radius: 0px;">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">账号</label>
                            <div class="col-sm-6">
                                <input type="text" id="name" th:value="${user.name}" placeholder="账号"
                                       class="form-control">
                            </div>
                        </div>
                        <input hidden="hidden" id="id" th:value="${user.id}">
                        <!-- <div class="form-group">
                             <label class="col-sm-3 control-label">密码</label>
                             <div class="col-sm-6">
                                 <input type="password" id="password" th:value="${user.password}" placeholder="密码" class="form-control">
                             </div>
                         </div>-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户姓名</label>
                            <div class="col-sm-6">
                                <input type="text" id="realname" th:value="${userProfile.realName}" placeholder="用户姓名"
                                       class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">电子邮件</label>
                            <div class="col-sm-6">
                                <input type="text" id="email" th:value="${user.email}" placeholder="电子邮件"
                                       class="form-control" onchange="testemail()">
                                <span id="checkemail" style="color: red"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户手机号</label>
                            <div class="col-sm-6">
                                <input type="text" id="mobile" th:value="${user.mobile}" placeholder="用户手机号"
                                       class="form-control" onchange="testmobile()">
                                <span id="checkmobile" style="color: red"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <input hidden="hidden" id="genderhid" th:value="${userProfile.gender}">
                            <label class="col-sm-3 control-label">用户性别</label><!--userProfile-->
                            <div class="col-sm-6">
                                <label class="radio-inline"> <input type="radio" checked="" id="radio1" name="gender"
                                                                    class="icheck" value="1"> 男</label>
                                <label class="radio-inline"> <input type="radio" name="gender" id="radio2"
                                                                    class="icheck" value="2"> 女</label>
                                <label class="radio-inline"> <input type="radio" name="gender" id="radio3"
                                                                    class="icheck" value="0">
                                    未知</label>
                            </div>
                        </div>

                        <input hidden="hidden" id="usertype" th:value="${organizationUser.organizationType}">
                        <!--<div class="form-group">
                            <label class="col-sm-3 control-label">Textarea</label>
                            <div class="col-sm-6">
                                <textarea class="form-control"></textarea>
                            </div>
                        </div>-->

                        <div class="form-group">
                            <label class="col-sm-3 control-label">所属省份</label>

                            <div class="col-sm-6">

                                <select class="select2" id="province">
                                    <span th:each=" area :${areaList}">
                                      <option th:text="${area.areaName}"
                                              th:value="${area.provinceId}"
                                              th:selected="${userProfile.province==area.areaName}"></option>

                                   </span>
                                </select>

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">所属城市</label>
                            <div class="col-sm-6">
                                <select class="select2" id="city">
                                    <option th:value="${userProfile.cityId}" th:text="${userProfile.city}">请选择省份...
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">所属县区</label>
                            <div class="col-sm-6">
                                <select class="select2" id="region">
                                    <option th:value="${userProfile.regionId}" th:text="${userProfile.region}">请选择城市...
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">所属镇</label>
                            <div class="col-sm-6">
                                <select class="select2" id="street">
                                    <option th:value="${userProfile.streetId}" th:text="${userProfile.street}">请选择县区...
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">所属村</label>
                            <div class="col-sm-6">
                                <select class="select2" id="village">
                                    <option th:value="${userProfile.villageId==null?'':userProfile.villageId}"
                                            th:text="${userProfile.village==null?'请选择...':userProfile.village}">请选择镇...
                                    </option>
                                    >
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="lev">
                            <input hidden="hidden" id="opti" th:value="${user.areaLevel}">
                            <label class="col-sm-3 control-label">权限等级</label><!--user-->
                            <div class="col-sm-6">
                                <select class="select2" id="level">
                                    <option value="">请选择...</option>
                                    <option id="opt1" value="1" th:if="${level==1}" th:selected="${user.areaLevel==1}">
                                        省级
                                    </option>
                                    <option id="opt2" value="2" th:if="${level<=2}" th:selected="${user.areaLevel==2}">
                                        市级
                                    </option>
                                    <option id="opt3" value="3" th:if="${level<=3}" th:selected="${user.areaLevel==3}">
                                        县级
                                    </option>
                                    <option id="opt4" value="4" th:if="${level<=4}" th:selected="${user.areaLevel==4}">
                                        镇级
                                    </option>
                                    <option id="opt5" value="5" th:if="${level<=5}" th:selected="${user.areaLevel==5}">
                                        村级
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="role">
                            <label class="col-sm-3 control-label">用户角色</label>
                            <div class="col-sm-6">
                                <select class="select2" id="roleName">
                                    <option value="">请选择...</option>
                                    <span th:each="role :${roles}">
                                        <option th:value="${role.name}"
                                                th:text="${role.name}"
                                                th:selected="${organizationUser.roleName==role.name}"></option>
                                                </span>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">单位</label><!--organizationUser-->
                            <div class="col-sm-6">
                                <select class="select2" id="organizationId">
                                    <span th:each="organ :${organList}">
                                        <option th:value="${organ.id}"
                                                th:text="${organ.name}"
                                                th:selected="${organizationUser.organizationName==organ.name}"></option>
                                                </span>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" th:if="${organizationUser.organizationType==3}" id="compan">
                            <label class="col-sm-3 control-label">部门</label><!--departmentUser-->
                            <div class="col-sm-6">
                                <select class="select2" id="company">
                                    <option th:value="${departmentUser.departmentId}"
                                            th:text="${departmentUser.departmentName}">请选择...
                                    </option>

                                </select>
                            </div>
                        </div>


                        <!--   <div class="form-group">
                               <label class="col-sm-3 control-label">Inline Checkbox</label>
                               <div class="col-sm-6">
                                   <label class="checkbox-inline"> <input type="checkbox" checked="" name="rad1" class="icheck"> Option 1</label>
                                   <label class="checkbox-inline"> <input type="checkbox" name="rad1" class="icheck"> Option 2</label>
                                   <label class="checkbox-inline"> <input type="checkbox" name="rad1" class="icheck"> Option 3</label>
                               </div>
                           </div>-->

                        <div class="form-actions">
                            <button style="margin-left:40%" type="button" class="btn btn-primary" onclick="saveUser()">
                                保存
                            </button>

                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <button style="margin-left:5%" class="btn" type="button" onclick="history.back()">返回
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>


    </div>

</div>
<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var b = false;
    function
    checkEmail(str) {
        var
            re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }
    function testemail() {
        var email = $("#email").val();
        if (!checkEmail(email)) {
            $("#checkemail").text("请输入正确邮箱");
            b = false;
        } else {
            $("#checkemail").text("");
            b = true;
        }
    }

    function
    checkMobile(str) {
        var
            re = /^1\d{10}$/;
        if (re.test(str)) {
            return true;
        } else {
            return false;
        }
    }

    function testmobile() {
        var mobile = $("#mobile").val();
        if (!checkMobile(mobile)) {
            $("#checkmobile").text("请输入正确手机号");
            b = false;
        } else {
            $("#checkmobile").text("");
            b = true;
        }
    }

    $(document).ready(function () {

        App.init();

        if ($("#usertype").val() == 1) {

            $("#role").attr("hidden", "hidden");
            $("#lev").attr("hidden", "hidden");
            $("#compan").attr("hidden", "hidden");

        }


        if ($("#genderhid").val() == 1) {
            $("#radio1").attr("checked", "checked");
        } else if ($("#genderhid").val() == 2) {
            $("#radio2").attr("checked", "checked");
        } else {
            $("#radio3").attr("checked", "checked");
        }

        /*
         var val = $("#opti").val();
         $("#level").find("option[value="+val+"]").attr("selected",true);
         */



        $("#province").change(function () {
            $("#city").html("");
            $("#city").html("<option value=''>请选择...</option>");
            if ($("#province").val() != "") {
                $.ajax({
                    type: "GET",
                    url: "/management/user/change",
                    data: {
                        provinceId: $("#province").val(),
                        level: 2
                    },
                    dataType: "json",
                    success: function (data) {
                        var str = "";
                        $.each(data, function (index, item) {
                            str += "<option value=" + item.cityId + ">" + item.areaName + "</option>";
                            $("#city").append(str);
                            str = "";
                        })
                    }

                })
            }
        })
        $("#city").change(function () {
            $("#region").html("");
            $("#region").html("<option value=''>请选择...</option>");
            if ($("#city").val() != "") {
                $.ajax({
                    type: "GET",
                    url: "/management/user/change",
                    data: {
                        provinceId: $("#province").val(),
                        cityId: $("#city").val(),
                        level: 3
                    },
                    dataType: "json",
                    success: function (data) {
                        var str = "";
                        $.each(data, function (index, item) {
                            str += "<option value=" + item.regionId + ">" + item.areaName + "</option>";
                            $("#region").append(str);
                            str = "";
                        })
                    }

                })
            }

        })
        $("#region").change(function () {
            $("#street").html("");
            $("#street").html("<option value=''>请选择...</option>");
            if ($("#region").val() != "") {
                $.ajax({
                    type: "GET",
                    url: "/management/user/change",
                    data: {
                        provinceId: $("#province").val(),
                        cityId: $("#city").val(),
                        regionId: $("#region").val(),
                        level: 4
                    },
                    dataType: "json",
                    success: function (data) {
                        var str = "";
                        $.each(data, function (index, item) {
                            str += "<option value=" + item.streetId + ">" + item.areaName + "</option>";
                            $("#street").append(str);
                            str = "";
                        })
                    }

                })
            }
        })
        $("#street").change(function () {
            $("#village").html("");
            $("#village").html("<option value=''>请选择...</option>");
            if ($("#street").val() != "") {
                $.ajax({
                    type: "GET",
                    url: "/management/user/change",
                    data: {
                        provinceId: $("#province").val(),
                        cityId: $("#city").val(),
                        regionId: $("#region").val(),
                        streetId: $("#street").val(),
                        level: 5
                    },
                    dataType: "json",
                    success: function (data) {
                        var str = "";
                        $.each(data, function (index, item) {
                            str += "<option value=" + item.villageId + ">" + item.areaName + "</option>";
                            $("#village").append(str);
                            str = "";
                        })
                    }

                })
            }
        })


        $("#organizationId").change(function () {
            $("#company").html("");
            $("#company").html("<option value=''>请选择...</option>");
            if ($("#organizationId").val() != "") {
                $.ajax({
                    type: "GET",
                    url: "/management/user/company",
                    data: {
                        id: $("#organizationId").val()
                    },
                    dataType: "json",
                    success: function (data) {
                        var str = "";
                        $.each(data, function (index, item) {
                            str += "<option value=" + item.id + ">" + item.name + "</option>";
                            $("#company").append(str);
                            str = "";
                        })
                    }

                })
            }
        })

    });
    function saveUser() {
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;

            var id = $("#id").val();
            var name = $("#name").val();
            var realname = $("#realname").val();
            var gender = $('input:radio:checked').val();
            var usertype = $("#usertype").val();
            var province = $("#province").val();
            var city = $("#city").val();
            var region = $("#region").val();
            var street = $("#street").val();
            var village = $("#village").val() == '' ? '-1' : $("#village").val();
            var organizationId = $("#organizationId").val();
            var company = $("#company").val();
            var mobile = $("#mobile").val();
            var email = $("#email").val();
            var level = $("#level").val();
            var roleName = $("#roleName").val();
            if (!b) {
                return false;
            }
            if (name == "") {
                alert('请输入账号');
                return false;
            }
            if (realname == "") {
                alert('请输入用户名称');
                return false;
            }
            if (gender == '') {
                alert('请选择性别');
                return false;
            }
            if (province == "") {
                alert('请选择省份');
                return false;
            }
            if (city == "") {
                alert('请选择城市');
                return false;
            }
            if (region == "") {
                alert('请选择县区');
                return false;
            }
            if (street == "") {
                alert('请选择镇');
                return false;
            }
            if (level == "") {
                alert('请选择权限');
                return false;
            }
            if (company == "") {
                alert('请选择部门');
                return false;
            }

            if (email == "0") {
                alert('请输入电子邮箱');
                return false;
            }
            if (organizationId == "") {
                alert('请选择单位');
                return false;
            }
            if (mobile == "") {
                alert('请输入用户手机号');
                return false;
            }
            var postData = {
                id: id,
                name: name,
                realname: realname,
                gender: gender,
                email: email,
                usertype: usertype,
                provinceId: province,
                cityId: city,
                regionId: region,
                streetId: street,
                villageId: village,
                organizationId: organizationId,
                company: company,
                mobile: mobile,
                level: level,
                roleName: roleName
            };
            $.ajax({
                type: "POST",
                url: "/management/user/doupdate",
                data: postData,
                dataType: "json",
                success: function (data) {
                    if (data == true) {
                        layer.open({
                            content: '修改完成，请返回'

                            , yes: function (index, layero) {
                                location.href = '/management/user/show';
                            }

                            , cancel: function () {
                                return false;// 开启该代码可禁止点击该按钮关闭
                            }
                        });
                    }
                    else {
                        layer.alert('修改失败，请重试！');
                    }
                }
            });
        })
    }


</script>


</body>
</html>
